<template>
  <div id="login">
    <img class="wave" src="../assets/static/img/bg_login.png" alt="">
    <div class="container">

      <div class="img">
        <img src="../assets/static/img/bg_login_people.svg" alt="">
      </div>
      <div class="login-content">
        <form @keyup.enter="login">
          <img src="../assets/static/img/avatar_man.svg" style="height: 100px;cursor: pointer" @click="avatar" alt="头像">
          <h2 class="title">欢迎登陆</h2>
          <div class="input-div">
            <div class="i">
              <i class="el-icon-s-custom"></i>
            </div>
            <div class="div">
              <h5 class="hint">用户名</h5>
              <input type="text" name="username" v-model.trim="form.username"  @focus="add($event.target)" @blur="remove($event.target)" class="input" required>
            </div>
          </div>
          <div class="input-div pass">
            <div class="i">
              <i class="el-icon-s-grid"></i>
            </div>
            <div class="div">
              <h5 class="hint">密码</h5>
              <input type="password" name="password" v-model.trim="form.password" @focus="add($event.target)" @blur="remove($event.target)" class="input" required>
            </div>
          </div>
          <div class="input-div pass" style="width: 200px;grid-template-columns: 13% 87%;">
            <div class="i">
              <i class="el-icon-mouse"></i>
            </div>
            <div class="div">
              <h5 class="hint">验证码</h5>
              <input type="text" name="captcha" v-model.trim="form.captcha" @focus="add($event.target)" @blur="remove($event.target)" class="input" required>
              <img :src="src" class="captcha" @click="getCaptchaImage()" ref="captcha" alt="验证码"/>
            </div>
          </div>
          <div class="pass">
            <label style="cursor: pointer">
              <input type="checkbox" name="rememberMe" value="1"><span style="color: grey;font-size: 15px">记住我</span>
            </label>
          </div>
          <router-link to="/register">加入我们?</router-link>

          <input type="button" class="btn" @click="login()" value="登 陆">
        </form>
      </div>
    </div>
  </div>

</template>

<script>

  export default ({
    name: 'Login',
    data() {
      return{
        src : '',
        form: {
          username : 'user',
          password : '123',
          captcha : '1',
        },
      }
    },
    methods : {
      login(){
        if (this.form.username === "" || this.form.password === "" || this.form.captcha === ""){
          this.$notify.warning({title: '失败', message: '不能为空',});
          return;
        }

        this.$store.dispatch('user/login', this.form).then(() => {
          this.$router.replace({path: '/'});
        }).catch(() => {
        })
      },
      avatar(){
        this.$notify.success({title: '欢迎', message: '别点了！快快登录吧~',});
      },
      add(el){
        let parent = el.parentNode.parentNode;
        parent.classList.add("focus");
      },
      remove(el){
        let parent = el.parentNode.parentNode;
        if(el.value === ""){
          parent.classList.remove("focus");
        }
      },
      getCaptchaImage(){
        this.src = 'http://127.0.0.1:8088/common/captcha?time='+Math.random();//防止图片缓存
      },
    },

    beforeMount (){//页面挂载之前
      /*消息弹窗全局配置*/
    },
    mounted(){//页面挂载之后
      this.getCaptchaImage()
    },
  });
</script>

<style scoped>
  @import '../assets/static/css/commons.css';

  .wave{
    position: fixed;
    bottom: 0;
    left: 0;
    height: 100%;
    z-index: -1;
  }

  .input-div:before, .input-div:after{
    background-color: #38d39f;
  }

  .input-div.focus > .i > i{
    color: #38d39f;
  }

  .captcha{
    cursor: pointer;
    position: absolute;
    bottom: 0;
    right: -156px;
  }

  a:hover{
    color: #38d39f;
  }

  .btn{
    display: block;
    width: 100%;
    height: 50px;
    border-radius: 25px;
    outline: none;
    border: none;
    background-image: linear-gradient(to right, #32be8f, #38d39f, #32be8f);
    background-size: 200%;
    font-size: 1.2rem;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    margin: 1rem 0;
    cursor: pointer;
    transition: .5s;
  }
  .btn:hover{
    background-position: right;
  }
</style>
